<template>
  <div class="cart-box">
    <div class="cart-top">
      <div class="title">
        <span class="left">全场换购</span>
        <span class="center">再购1件享低至2.5折超值换购</span>
        <span class="right"
          >去换购
          <img
            src="https://yanxuan.nosdn.127.net/static-union/16583952462be242.png"
            alt=""
        /></span>
      </div>
    </div>
    <div class="cart-center">
      <div class="cart-item" v-for="item in cartStore.cartList" :key="item.id">
        <!-- 每个商品前的按钮 -->
        <van-checkbox
          v-model="item.isChecked"
          class="checked"
          @click="checkboxClick(item)"
        ></van-checkbox>
        <!-- 商品信息  thumb:图片 -->
        <van-swipe-cell class="swipe">
          <van-card
            class="goods-card"
            :price="item.cartPrice"
            :title="item.skuName"
            :thumb="item.imgUrl"
          >
            <template #num>
              <van-stepper
                v-model="item.skuNum"
                @plus="stepperPlus(item)"
                @minus="stepperminus(item)"
              ></van-stepper>
            </template>
          </van-card>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="removeGood(item)"
            />
          </template>
        </van-swipe-cell>
      </div>
    </div>
    <!-- 结算   //cartStore.totalPrice-->
    <van-submit-bar
      class="submit"
      :price="price"
      button-text="结算"
      @submit="tiaozhuan"
    >
      <van-checkbox :v-model="isChecked" @click="updateAllGoodChecked"
        >全选</van-checkbox
      >
    </van-submit-bar>
  </div>
</template>

<script lang="ts">
import { ref, onMounted } from "@vue/runtime-core";
//获取仓库
import { cartListStore } from "../../stores/cart";
import { useRouter, useRoute } from "vue-router";
export default {
  name: "cart",
};
</script>

<script setup lang="ts">
//仓库
const cartStore = cartListStore();
//全选的状态
let isChecked = () => {
  return cartStore.cartList.every((good: any) => good.isChecked == 1);
};
const router = useRouter();
//跳转
const tiaozhuan = () => {
  router.push("/trade");
};
//选择商品的价格
let price = ref(cartStore.Price * 100);
//加1的回调
let stepperPlus = async (item: any) => {
  await cartStore.addToCart(item.skuId, 1);
};
//减一的回调
let stepperminus = async (item: any) => {
  await cartStore.minusCart(item.skuId, -1);
};

//删除商品的回调
let removeGood = async (item: any) => {
  await cartStore.removeGoodById(item.skuId);
  cartStore.getcart();
};
//商品checked状态
let checkboxClick = async (item: any) => {
  //let check=item.checked?"0" : "1"

  await cartStore.checkbox(item.skuId, item.isChecked ? "1" : "0");
};

//商品全选的回调
let updateAllGoodChecked = async () => {
  let Checked = isChecked() ? "0" : "1";
  await cartStore.AllChecked(Checked);
  //获取购物车列表
  cartStore.getcart();
};
onMounted(() => {
  //获取购物车列
  cartStore.getcart();
  cartStore.totalPrice();
});
</script>

<style scoped>
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.cart-box {
  width: 100%;
  min-height: 100vh;
  padding: 10px;
  margin: 0;
  background: #eee;
}
.cart-top {
  width: 355px;
  background: white;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
}
.cart-top .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart-top .title .left {
  font-weight: 700;
  font-size: 16px;
  color: #333333;
}
.cart-top .title .center {
  font-size: 14px;
}
.cart-top .title .right {
  font-size: 12px;
}
.cart-top .title .right img {
  width: 5px;
  height: 9px;
}
.cart-top .swipe {
  display: flex;
  align-items: center;
  width: 100%;
  height: 120px;
  background: #fff;
  overflow: hidden;
}
.cart-top .swipe .w {
  display: block;
  width: 120px;
  height: 100px;
  background: #eee;
}
.cart-center {
  width: 355px;
  height: 535px;
  overflow: scroll;
  background: white;
  padding: 10px;
  margin-top: 10px;
  box-sizing: border-box;
  border-radius: 10px;
}
.cart-center .cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart-center .cart-item .checked {
  flex: 1;
}
.cart-center .cart-item .swipe {
  flex: 10;
}
.submit {
  position: fixed;
  bottom: 50px;
}
</style>
